<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>
        <div class="top-bar">
            <img src="images/fenlei.png" alt="">
            <img src="https://image2.suning.cn/uimg/cms/img/163705983225575365.gif" alt="">
            <img src="images/denglu.png" alt="">
        </div>
        <div class="search-box">
            <div class="search">
                <img src="images/search.png" alt="">
                <input type="text" placeholder="热水器爆款买">
            </div>
        </div>
        <div class="banner">
            <div class="banner-bg"></div>
            <ul>
                <li>
                    <img src="images/banner.jpg" alt="">
                </li>
            </ul>
        </div>
    </header>
    <div class="ad">
        <img src="https://image1.suning.cn/uimg/cms/img/163703855787216819.gif" alt="">
    </div>
    <nav>
        <ul>
            <li>
                <img src="images/nav01.png" alt="">
                <p>家乐福</p>
            </li>
            <li>
                <img src="images/nav02.png" alt="">
                <p>苏宁超市</p>
            </li>
            <li>
                <img src="images/nav03.png" alt="">
                <p>苏宁拼购</p>
            </li>
            <li>
                <img src="images/nav04.png" alt="">
                <p>手机数码</p>
            </li>
            <li>
                <img src="images/nav05.png" alt="">
                <p>苏宁家电</p>
            </li>
            <li>
                <img src="images/nav06.png" alt="">
                <p>免费水果</p>
            </li>
            <li>
                <img src="images/nav07.png" alt="">
                <p>super会员</p>
            </li>
            <li>
                <img src="images/nav08.png" alt="">
                <p>签到有礼</p>
            </li>
            <li>
                <img src="images/nav09.png" alt="">
                <p>领券中心</p>
            </li>
            <li>
                <img src="images/nav10.png" alt="">
                <p>更多频道</p>
            </li>
        </ul>
    </nav>
    <div class="sale">
        <img src="images/b1.jpg" alt="">
        <img src="images/b2.png" alt="">
        <img src="images/b3.png" alt="">
    </div>
    <div class="miaosha">
        <div class="top">
            <div class="l">
                <div class="m-item">
                    <div class="h">
                        <span class="t">限时秒杀</span>
                        <span class="time">
                            <span>00</span>:
                            <span>05</span>:
                            <span>02</span>
                        </span>
                    </div>
                    <p class="des">人气好货限时抢</p>
                    <ul>
                        <li>
                            <img src="images/c1.jpg" alt="">
                            <p>&yen;19.9</p>
                        </li>
                        <li>
                            <img src="images/c2.jpg" alt="">
                            <p>&yen;9.9</p>
                        </li>
                    </ul>
                </div>
                <div class="m-item">
                    <div class="h">
                        <span class="t">新品首发</span>
                    </div>
                    <p class="des">大牌新机0元试</p>
                    <ul>
                        <li>
                            <img src="images/c3.webp" alt="">
                        </li>
                        <li>
                            <img src="images/c4.webp" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="r">
                <div class="m-item">
                    <div class="h">
                        <span class="t">大聚惠</span>
                    </div>
                    <p class="des">聚优品 惠生活</p>
                    <ul>
                        <li>
                            <img src="images/c5.webp" alt="">
                            <p>Apple</p>
                        </li>
                        <li>
                            <img src="images/c6.webp" alt="">
                            <p>苏鲜生</p>
                        </li>
                    </ul>
                </div>
                <div class="m-item">
                    <div class="h">
                        <span class="t">苏宁拼购</span>
                    </div>
                    <p class="des">2人拼更实惠 全场包邮</p>
                    <ul>
                        <li>
                            <img src="images/c7.webp" alt="">
                            <p>2人拼399</p>
                        </li>
                        <li>
                            <img src="images/c8.webp" alt="">
                            <p>2人拼51</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="h">
                <p>为您推荐</p>
                <p>精选频道</p>
            </div>
            <ul>
                <li>
                    <img src="images/mb1.webp" alt="">
                    <p>苏宁国际</p>
                </li>
                <li>
                    <img src="images/mb2.webp" alt="">
                    <p>苏宁Outlets</p>
                </li>
                <li>
                    <img src="images/mb3.png" alt="">
                    <p>会员抢购</p>
                </li>
                <li>
                    <img src="images/mb4.png" alt="">
                    <p>Super会员</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="ranking-list">
        <p>推荐榜单</p>
        <ul class="rank">
            <li>
                <img src="images/r1.webp" alt="">
                <div class="b">
                    <span>人气榜</span>
                    <p>人气手机榜</p>
                    <p>新品畅玩</p>
                </div>
            </li>
            <li>
                <img src="images/r2.png" alt="">
                <div class="b">
                    <span>人气榜</span>
                    <p>时尚保鲜冰箱榜</p>
                    <p>本周趋势上升65%</p>
                </div>
            </li>
            <li>
                <img src="images/r3.webp" alt="">
                <div class="b">
                    <span>人气榜</span>
                    <p>进口酒礼盒榜</p>
                    <p>今日热销爆款</p>
                </div>
            </li>
        </ul>
        <div class="ranks">
            <div class="m-item">
                <div class="h">
                    <span class="t">婴幼配方奶粉榜</span>
                    <span>人气榜</span>
                </div>
                <p class="des">营养美味 呵护成长</p>
                <ul>
                    <li>
                        <img src="images/rs1.webp" alt="">
                    </li>
                    <li>
                        <img src="images/rs2.webp" alt="">
                    </li>
                </ul>
            </div>
            
            <div class="m-item">
                <div class="h">
                    <span class="t">浓香菜籽油榜</span>
                    <span>人气榜</span>
                </div>
                <p class="des">卖爆1581件</p>
                <ul>
                    <li>
                        <img src="images/rs3.png" alt="">
                    </li>
                    <li>
                        <img src="images/rs4.webp" alt="">
                    </li>
                </ul>
            </div>
            <div class="m-item">
                <div class="h">
                    <span class="t">性能游戏本榜</span>
                    <span>人气榜</span>
                </div>
                <p class="des">今日热销爆款</p>
                <ul>
                    <li>
                        <img src="images/rs5.webp" alt="">
                    </li>
                    <li>
                        <img src="images/rs6.webp" alt="">
                    </li>
                </ul>
            </div>
            <div class="m-item">
                <div class="h">
                    <span class="t">亲肤柔韧抽纸榜</span>
                    <span>人气榜</span>
                </div>
                <p class="des">卖爆697件</p>
                <ul>
                    <li>
                        <img src="images/rs7.webp" alt="">
                    </li>
                    <li>
                        <img src="images/rs8.webp" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>